iT邦幫忙

2024 iThome 鐵人賽

DAY 22
0
JavaScript

PM說: RD大大,這個功能要怎麼寫啊?系列 第 22

PM 說: 怎麼在網頁上嵌入 PDF?

  • 分享至 

  • xImage
  •  

hero

前言

不知道讀者們有沒有用過筆記軟體Notion
其中有個功能叫做 Embed => 可以嵌入 pdf檔案

今天來做一個在網頁上嵌入pdf的MVP

我們會用到一個平常比較少看到的標籤叫做 <object>
它很神奇可以透過data屬性來引入

  1. 圖片 example
  2. html example
  3. 影片or聲音 example
  4. 外部資源

建議:

  • 圖片還是要用 <img>
  • html還是要用 <iframe>
  • video還是要用 <video>
  • audio還是要用 <audio>
    語意上比較清楚

成果

網頁上嵌入pdf_demo


補充

  1. 不是所有網址的pdf都能被嵌入
    ex: https://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=10380712
    像上面這個網址是先經過 java寫的後端再返回pdf檔案
    如果用postman GET 會被阻擋
    day-22-postman

2.文件有寫usemap屬性但是實際測試沒效果
拿昨天的影像地圖來改寫成obeject但沒作用
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object#usemap
https://www.w3schools.com/TAgs/tag_object.asp

3.若想要透過html按鈕控制pdf內容
ex: 跳頁
需要用其他套件才能實現

推薦套件:pdfjs

PDF.js Previous/Next example

程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>object tag demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: black;
      }
      .wrapper {
        height: 99dvh;
        border: 2px solid white;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <object
        type="application/pdf"
        data="https://interactive-examples.mdn.mozilla.net/media/examples/In-CC0.pdf"
        width="100%"
        height="100%"
      ></object>
    </div>
  </body>
</html>


上一篇
PM 說: 你有聽過網頁的影像地圖嗎?
下一篇
PM 說: 怎麼在網頁顯示數學公式 or 化學式?
系列文
PM說: RD大大,這個功能要怎麼寫啊?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
YUAN
iT邦新手 2 級 ‧ 2024-09-19 21:47:25

晚上剛好看到一個前端debug小技巧影片,覺得不錯分享個~

【前端错误调试的小技巧】 https://www.bilibili.com/video/BV14PHCe1EnD/?share_source=copy_web&vd_source=77d7a376bbe040202ede333f5e4fa1f0

我要留言

立即登入留言